import React, { Component, Fragment } from "react";
// antd
import { Dropdown, Table, Button, Col, Pagination, Form, Input, Tag, Space, Menu } from "antd";
import { DownOutlined } from '@ant-design/icons';
import Action from "@c/buttonAction/Index";

// http
import http from '../../utils/request';
import ExportJsonExcel from "js-export-excel";


class DingTalkApprovalRecord extends Component {
    constructor(props){
        super(props);
        this.state = {
            // 表格分页
            total: '',
            page: 1,
            page_number: 10,
            dataSource: [],
            columns: [
                {title: "模块", dataIndex: "module_name", key: "module_name",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.module_name}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "类型", dataIndex: "service_type", key: "service_type",
                    render: (text, rowData) => {
                        return(
                            <div>
                                <Tag color="green">{rowData.service_type}</Tag>                                
                            </div>
                        )
                    }
                },
                {title: "用户", dataIndex: "name", key: "name"},
                {title: "部门", dataIndex: "dept", key: "dept"},
                {title: "时间", dataIndex: "created", key: "created"},
                {title: "请求数据", dataIndex: "data", key: "data"},
                {title: "处理结果", dataIndex: "result", key: "result"},
            ],
            loading: false,
            search_module_name: null,
            search_service_type: null,
            search_name: null,
        }
    }

    componentDidMount() {
        this.loadData()
    }

    loadData = () => {
        this.setState({
            loading: true
        })
        const requestData = {
            'page': this.state.page,
            'limit': this.state.page_number,
            'name__contains': this.state.search_name,
            'module_name__contains': this.state.search_module_name,
            'service_type__contains': this.state.search_service_type,
        }

        // 获取分组列表
        http.get('/dingtalk/approval/record', {params: requestData}).then(response=>{
            this.setState({
                dataSource: response.data.data.items,
                total: response.data.data.pages.total,
                loading: false
            })
        }).catch()
    }

    /** 切换每页数量 */
    onChangeSizePage = (page, page_number) => {
        this.setState({
            page: page,
            page_number: page_number,
        }, () => {
            this.loadData()
        })
    }

    /** 业务线搜索 */
    onFinishSearch = (data) => {
        this.setState({
            search_name: data.search_name ? data.search_name : null,
            search_module_name: data.search_module_name ? data.search_module_name : null,
            search_service_type: data.search_service_type ? data.search_service_type : null,
        })
        this.loadData()
    }

    // 一键导出
    onexportExcelBtn = () => {
        // 不同云产品添加自定义字段
        const _cmdb_sheet_filter = ["module_name", "service_type", "name", "dept", "created", "data", "result"]
        const _cmdb_sheet_header = ["审批模块", "审批类型", "用户", "用户部门", "审批时间", "审批明细", "处理结果"]
        let option = {}
        option.fileName = "钉钉审批数据"
        option.datas = [
            {
                sheetData: this.state.dataSource,
                sheetName: '钉钉审批数据',
                sheetFilter: _cmdb_sheet_filter,
                sheetHeader: _cmdb_sheet_header
            }
        ]
        var toExcel = new ExportJsonExcel(option)
        toExcel.saveExcel()
    }

    render(){
        const { loading, dataSource, columns, page, total } = this.state
        const rowSelection = {
            onChange: this.onCheckbox
        }
        const operations = (
            <Menu
                items={[
                    {
                        label: (
                            <Action.Button onClick={() => this.onexportExcelBtn()} >导出页面数据</Action.Button>
                        ),
                        key: '1',
                    },
                ]}
            />
        );


        var myStyle = {margin: '20px'}
        var myStyle1 = {margin: '10px', float: 'right'}
        return (
            <Fragment>
                <Form layout="inline" onFinish={this.onFinishSearch}>
                    <Form.Item label="申请用户" name="search_name">
                        <Input placeholder="请输入申请用户名称"  />
                    </Form.Item>
                    <Form.Item label="申请类别" name="search_module_name">
                        <Input placeholder="请输入申请模块"  />
                    </Form.Item>
                    <Form.Item label="申请服务" name="search_service_type">
                        <Input placeholder="请输入服务类型"  />
                    </Form.Item>
                    <Form.Item shouldUpdate={true}>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>
                
                <div style={myStyle1}>
                    <Dropdown overlay={operations}>
                        <Action.Button>
                            <Space>
                                更多操作
                                <DownOutlined />
                            </Space>
                        </Action.Button>
                    </Dropdown>
                </div>

                <Table
                    pagination={false} 
                    rowSelection={rowSelection} 
                    rowKey="id" 
                    columns={columns} 
                    dataSource={dataSource}
                    loading={loading}
                    scroll={{ y: 500, x: '70vw' }}
                >
                </Table>

                <div style={myStyle}>
                    <Col span={16}>
                        <Pagination
                            onChange={this.onChangeSizePage}
                            current={page}
                            total={total}
                            pageSizeOptions={[10, 20, 50, 100, 300, 500, 1000, 3000, 10000, 30000]}
                            showSizeChanger
                            showQuickJumper
                            showTotal={total => `Total ${total} items`}
                        />
                    </Col>
                </div>
            </Fragment>
        )
    }
}
export default DingTalkApprovalRecord;